<template>
	<view class="container">
		<view class="header">
			<view class="title">我的培养对象</view>
		</view>
		
		<view class="student-list">
			<view v-if="loading" class="loading">
				<uni-load-more status="loading" />
			</view>
			<view v-else-if="!userList || userList.length === 0" class="empty">
				<image class="empty-icon" src="/static/icons/empty.png"></image>
				<text class="empty-text">暂无培养对象</text>
			</view>
			<view v-else v-for="(student, index) in userList" :key="index" class="student-card">
				<view class="student-header">
					<view class="avatar-container">
						<image class="avatar" :src="student.avatarUrl || '/static/images/default-avatar.png'" mode="aspectFill"></image>
						<view class="gender-badge" :class="student.gender === '男' ? 'male' : 'female'">
							{{student.gender}}
						</view>
					</view>
					<view class="basic-info">
						<view class="name-age">
							<text class="name">{{student.name}}</text>
							<text class="age">{{student.age}}岁</text>
						</view>
						<view class="status">{{student.politicalStatus}}</view>
					</view>
				</view>
				
				<view class="student-info">
					<view class="info-item">
						<text class="label">联系电话：</text>
						<text class="value">{{student.phone}}</text>
					</view>
					<view class="info-item">
						<text class="label">所属部门：</text>
						<text class="value">{{student.dept}}</text>
					</view>
					<view class="info-item">
						<text class="label">电子邮件：</text>
						<text class="value">{{student.email}}</text>
					</view>
				</view>
				
				<view class="student-actions">
					<button class="action-btn primary" @click="showStudentApplyDetail(student)">查看入党申请书</button>
					<button class="action-btn primary" @click="showStudentVolunteerDetail(student)">查看入党志愿书</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { contactGetUser, userInfo } from '@/common/js/api';
	import { onLoad } from '@dcloudio/uni-app'
	import { ref  } from 'vue';
	
	const userId = uni.getStorageSync('userId');
	const userList = ref([]);
	const loading = ref(false);
	
	onLoad(async()=>{
		try {
			const resp = await contactGetUser(userId);
			if (resp.code == 200) {
				const userIdList = resp.data;
				for (var i = 0;i < userIdList.length;++i) {
					const resp_user = await userInfo(userIdList[i]);
					if(resp_user == null) {
						continue;
					}
					userList.value.push(resp_user);
				}
			} else {
				uni.showToast({
					title: '获取用户列表失败',
					icon: 'fail',
					duration: 2000
				});
			}
		} catch (error) {
			console.error('获取培养对象列表失败:', error);
			uni.showToast({
				title: '获取培养对象列表失败',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	});
	
	// 查看学生详情
	const showStudentApplyDetail = (student) => {
		uni.navigateTo({
			url: `/pages/mycontactusers/myapplies?id=${student.id}`
		});
	};
	
	const showStudentVolunteerDetail = (student) => {
		uni.navigateTo({
			url: `/pages/mycontactusers/myvolunteers?id=${student.id}`
		});
	};
	
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #f6f8fc 0%, #f1f4f9 100%);
	padding: 20rpx;
}

.header {
	padding: 30rpx 20rpx;
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #666;
	}
}

.student-list {
	padding: 20rpx 0;
}

.student-card {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	
	.student-header {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		
		.avatar-container {
			position: relative;
			margin-right: 20rpx;
			
			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				border: 4rpx solid #f0f0f0;
			}
			
			.gender-badge {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
				color: #fff;
				border: 2rpx solid #fff;
				
				&.male {
					background-color: #4a89dc;
				}
				
				&.female {
					background-color: #ed5565;
				}
			}
		}
		
		.basic-info {
			flex: 1;
			
			.name-age {
				display: flex;
				align-items: center;
				margin-bottom: 8rpx;
				
				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-right: 16rpx;
				}
				
				.age {
					font-size: 24rpx;
					color: #666;
					background-color: #f5f5f5;
					padding: 4rpx 12rpx;
					border-radius: 20rpx;
				}
			}
			
			.status {
				font-size: 26rpx;
				color: #ff7a45;
				background-color: rgba(255, 122, 69, 0.1);
				padding: 4rpx 16rpx;
				border-radius: 20rpx;
				display: inline-block;
			}
		}
	}
	
	.student-info {
		border-top: 2rpx solid #f5f5f5;
		padding-top: 20rpx;
		margin-bottom: 20rpx;
		
		.info-item {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.label {
				font-size: 28rpx;
				color: #666;
				width: 140rpx;
			}
			
			.value {
				font-size: 28rpx;
				color: #333;
				flex: 1;
			}
		}
	}
	
	.student-actions {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
		
		.action-btn {
			margin: 0;
			padding: 0 30rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 26rpx;
			border-radius: 30rpx;
			background-color: #ffffff;
			color: #666;
			border: 1px solid #ddd;
			
			&.primary {
				background-color: #ff7a45;
				color: #ffffff;
				border: none;
			}
		}
	}
}

.loading {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40rpx;
}

.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60rpx 0;
	
	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
		opacity: 0.5;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
}
</style>
